<template>
  <div class="contain" ref="containRef" id="contain">
    <div class="contentBox">
      <div class="header">
        <img src="../../assets/screen/header.png" />
        <div class="back" @click="backClick">
          <img src="../../assets/screen/back.svg" /> 返回主页
        </div>
      </div>
      <div class="main">
        <Map @itemChange="itemScreenChange" ref="mapRefs" />
        <div class="swiper" id="swipers" ref="swiper">
          <!-- :class="[screen == 1 ? 'leftIn' : 'leftout', 'anmi']" -->

          <div class="swiper-wrapper main-left">
            <div class="swiper-slide">
              <div class="main-left-top">
                <source-statistics
                  @itemChange="itemScreenChange"
                ></source-statistics>
                <!-- :class="[screen == 1 ? 'topIn' : 'topout', 'anmi']" -->
              </div>
            </div>
          </div>
        </div>

        <div class="main-middle animate__animated" @click="fullscreenClick">
          <p class="fullscreen">
            <img src="../../assets/screen/fullscreen.png" />
          </p>
        </div>
        <div
          class="main-right"
          :class="[screen == 1 ? 'rightIn' : 'rightout', 'anmi']"
        >
          <map-right
            @getImgInfo="getImgInfo"
            @itemChange="itemScreenChange"
          ></map-right>
        </div>
      </div>
    </div>

    <el-dialog :visible.sync="imgDialogVisible" width="50%">
      <img :src="curUrl" style="width: 100%" />
    </el-dialog>
    <!-- <div class="tips">
      <img src="../../assets/screen/tulie.png" />
    </div> -->
  </div>
</template>

<script>
import sourceStatistics from "./source-statistics";
import mapRight from "./map-right.vue";
import Map from "./map.vue";
export default {
  components: {
    sourceStatistics,
    mapRight,
    Map,
  },
  computed: {
    showOrHide() {
      if (this.screen === 1) {
        return "hide delay";
      } else if (this.screen === 1 && this.isClick === true) {
        return "hide delay";
      } else if (this.screen === 2 && this.isClick === false) {
        return "hide delay";
      } else if (this.screen === 2 && this.isClick === true) {
        return "show delay";
      }
    },
  },
  data() {
    return {
      enterpriseName: "",
      // 1:不是全屏，2是全屏
      screen: 2,
      active: false,
      sourceType: "",
      isClick: false,
      curState: 2,
      imgDialogVisible: false,
      curUrl: "",
    };
  },
  watch: {
    $route: {
      handler(val) {
        if (val) {
          if (val.query.isFullScreen) {
            //   console.log(
            //     "进阿里",
            //     val.query.isFullScreen,
            //     this.$refs.containRef
            //   );
            // this.$nextTick(() => {
            //   const element = document.getElementById("contain"); //指定全屏区域元素
            //   let requestMethod =
            //     element.requestFullScreen || //w3c
            //     element.webkitRequestFullScreen || // Chrome等
            //     element.mozRequestFullScreen || // FireFox
            //     element.msRequestFullScreen; // IE11
            //   if (requestMethod) {
            //     requestMethod.call(element);
            //   }
            //   // console.log("哈哈哈", this.$refs.containRef);
            //   // this.$refs && this.$refs.containRef.requestFullscreen();
            // });
          }
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    // this.$bus.$on("setScreenEvent", (mes) => {
    //   alert("当前", res);
    // });
    //  this.$refs.containRef.requestFullscreen();

    setTimeout(() => {
      this.$nextTick(() => {
        const element = document.getElementById("contain"); //指定全屏区域元素
        if (this.$route.query.isFullScreen === true) {
          console.log("进入全屏");
          const requestMethod =
            element.requestFullScreen || //w3c
            element.webkitRequestFullScreen || // Chrome等
            element.mozRequestFullScreen || // FireFox
            element.msRequestFullScreen; // IE11
          if (requestMethod) {
            requestMethod.call(element);
          }
        } else {
          console.log("退出全屏");
          const exitMethod =
            document.exitFullscreen ||
            document.webkitExitFullscreen ||
            document.mozCancelFullScreen ||
            document.msExitFullscreen;
          if (exitMethod) {
            exitMethod.call(document);
          }
        }
      });
    }, 10);

    // this.$bus.$on("handEvent", (mes) => {
    //   if (mes == "已完成") {
    //     this.$refs.swiper.swiper.slideTo(1, 500, false);
    //   } else if (mes == "未完成") {
    //     this.$refs.swiper.swiper.slideTo(0, 500, false);
    //   }
    // });
    // new Swiper('.main-left', {
    //     loop: true,
    //     // 如果需要前进后退按钮
    //     nextButton: '.swiper-button-next',
    //     prevButton: '.swiper-button-prev',

    // })
    // new Swiper("#swipers", {
    //   effect: "cube",
    //   // speed: 500,
    //   // loop: false,
    //   // grabCursor: true,
    //   // cubeEffect: {
    //   //     shadow: true,
    //   //     slideShadows: true,
    //   //     shadowOffset: 20,
    //   //     shadowScale: 0.94,
    //   // },
    // });
    // let _this = this;
    // window.onresize = function () {
    //   const clientHeight =
    //     document.documentElement.clientHeight || document.body.clientHeight;
    //   // screen是window的属性方法，window.screen可省略window，指的是窗口
    //   let isFullScreen = screen.height == clientHeight;
    //   console.log(screen.height == clientHeight);
    //   if (isFullScreen) {
    //     // _this.screen = 2
    //     _this.isClick = false;
    //   } else {
    //     _this.screen = 1;
    //     _this.isClick = false;
    //   }
    // };
    // this.$bus.$on("refresh", (mes) => {
    //   this.sourceType = "";
    //   this.$refs.mapRefs.$data.spotStatus = false;
    // });
  },
  methods: {
    getImgInfo(val) {
      this.imgDialogVisible = val.imgFlag;
      this.curUrl = val.curUrl;
    },
    itemScreenChange(val) {
      this.screen = val;
    },
    backClick() {
      this.$router.push("/screen");
    },
    interfaceFn(_val) {
      switch (_val.type) {
        // 范围内污染源列表
        case "listData":
          this.$refs.mapRefs.setSpotsList(_val.data);
          break;
        // 地图的点击事件
        case "mapCLick":
          console.log(this.$refs.sourceDetailsRef);
          this.$refs.sourceDetailsRef.$data.enterpriseInfo = _val.data;
          break;
        // 左侧范围内点击事件
        case "activeItem":
          this.$refs.mapRefs.setActive(_val.data);
          break;
      }
    },
    fullscreenClick() {
      const element = this.$refs.containRef;
      let requestMethod =
        element.requestFullscreen ||
        element.mozRequestFullScreen ||
        element.webkitRequestFullscreen ||
        element.msRequestFullscreen;
      if (requestMethod) {
        requestMethod.call(element);
      }
      // const element = document.getElementById("contain"); //指定全屏区域元素
      // if (this.screen == 1) {
      //   // element.requestFullscreen()
      //   let requestMethod =
      //     element.requestFullScreen || //w3c
      //     element.webkitRequestFullScreen || // Chrome等
      //     element.mozRequestFullScreen || // FireFox
      //     element.msRequestFullScreen; // IE11
      //   if (requestMethod) {
      //     requestMethod.call(element);
      //   }
      //   this.screen = 2;
      //   this.isClick = false;
      // } else {
      //   this.screen = 1;
      //   this.isClick = false;
      // }
    },
  },
};
</script>

<style lang="scss" scoped>
.contain {
  width: 95%;
  height: calc(100vh - 90px);
  margin: 15px auto 0;
  position: relative;
  overflow: hidden;
  .header {
    position: relative;
    height: 80px;
    width: 90%;
    margin: -2px auto;
    z-index: 1004;
    .back {
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      position: absolute;
      top: 20px;
      left: 0px;
      img {
        width: 42px;
        height: 33px;
        margin-right: 10px;
      }
    }
    img {
      width: 100%;
      height: auto;
    }
  }

  .main {
    width: 100%;
    display: flex;
    .main-left {
      width: 40rem;
      height: 90vh;
      overflow: hidden;
      padding-left: 1vh;

      .main-left-top {
        width: 100%;
      }

      .main-left-bottom {
        width: 100%;
        height: auto;
        margin-top: -6vh;
        margin-left: 15px;
      }
    }
    .main-middle {
      width: 70%;
      // height: 10vh;
      // margin-left: 1.6vh;
      // z-index: 1009;
      //   position: relative;

      .main-middle-top {
        width: 100%;
        height: 17.5vh;
      }

      .fullscreen {
        position: absolute;
        top: 0;
        right: 2vh;
        cursor: pointer;
        display: flex;

        img {
          height: 40px;
          width: 40px;
        }

        span {
          height: 5vh;
          color: #fff;
          display: block;
          padding-top: 2vh;
        }
      }
    }

    .action-bar {
      width: 50%;
      position: absolute;
      bottom: 25px;
      left: 35%;
      display: flex;
      cursor: pointer;
      .action-bar-img {
        width: 191px;
        img {
          width: 100%;
        }
      }
    }

    .main-right {
      width: auto;
      // height: 90vh;
      // margin-left: 1.6vh;
      margin-right: 1vh;
      // z-index: 1002;

      .main-right-top {
        width: 100%;
        height: 23vh;
        margin-top: 3vh;
        margin-bottom: 3vh;
        box-shadow: 4px 0px 8px 2px #d8d7d7;
        opacity: 0.9;
        background-color: #fff;
      }

      .main-right-bottom {
        width: 100%;
        height: 49vh;
        margin-top: 5vh;
        box-shadow: 4px 0px 8px 2px #d8d7d7;
        opacity: 0.9;
        background-color: #fff;
      }
    }
  }
  .tips {
    width: 150px;
    height: auto;
    position: absolute;
    bottom: 15px;
    left: 25%;
    img {
      width: 100%;
    }
  }
}
.swiper {
  z-index: 1002;
  // width: 40rem;
  margin-top: -10px;
}

.anmi {
  transition: all 0.3s;
}

.delay {
  animation-delay: 1s;
}

.show {
  animation: show 1s ease forwards;
}

.hide {
  animation: hide 1s ease forwards;
}

@keyframes show {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 100%;
  }
}

@keyframes hide {
  0% {
    opacity: 100%;
  }

  100% {
    opacity: 0;
  }
}

.leftIn {
  transform: translateX(0%);
}

.leftout {
  transform: translateX(-130%);
}

.rightIn {
  transform: translateX(0%);
}

.rightout {
  transform: translateX(130%);
}

.topIn {
  transform: translateY(0%);
}

.topout {
  transform: translateY(-200%);
}

@media screen and (min-height: 1051px) {
  .main-left {
    .main-left-top {
      width: 100%;
      margin-top: 25px;
    }
  }
  .map-right {
    margin-top: 0;
  }
}
</style>
